<template>
  <view class="hydropower-card" @click="onClick">
    <view class="hydropower-title">
      <view class="icon_box">
        <up-icon class="hydropower-icon" name="level" size="31rpx" />
      </view>
      {{ room }}
    </view>
    <view class="hydropower-content">
      <view class="content-left" :class="type == '电表' ? 'electric' : 'water'">
      </view>
      <view class="content-right">
        <view class="content-title">
          <view class="type">
            {{ type }}
          </view>
          |<view class="identifier"> {{ identifier }} </view>|
          <view class="nickname">
            {{ nickname }}
          </view>
        </view>
        <!-- <view class="content-balance"> 余额 ¥ {{ balance }} 元 </view> -->
        <view class="content-balance"> 当前读数：{{ balance }}</view>
        <!-- <view class="content-tag">
          <uni-tag
            :inverted="true"
            size="small"
            :text="
              type == '电费'
                ? `余额为负数时，无法正常用电`
                : `余额为负数时，无法正常用水`
            "
            type="success"
          />
        </view> -->
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps({
  // 房号
  id: {
    type: String,
  },
  // 房号
  room: {
    type: String,
  },
  // 费用类型
  type: {
    type: String,
  },
  // 户号
  identifier: {
    type: String,
  },
  // 单元
  unit: {
    type: String,
  },
  // 用户名
  nickname: {
    type: String,
  },
  // 余额
  balance: {
    type: [String,Number],
    default: "0.00",
  },
  // 标价
  standard: {
    type: String,
    default: "2.2元/吨",
  },
});
const emits = defineEmits(["on-click"]);

function onClick() {
  emits("on-click", {
    // id: props.id,
    room: props.room,
    type: props.type,
    unit: props.unit,
    // identifier: props.identifier,
    // nickname: props.nickname,
    // balance: props.balance,
    // standard: props.standard,
  });
}
</script>

<style lang="less" scoped>
@import url(./style/index.less);
</style>